<template>
    <Layout class="main" style="height:100%">
        <Sider class="left_silder">
            <side-menu :menu-list="menuList"></side-menu>
        </Sider>
        <Layout class="right_content">
            <Header class="header-con">
                <header-bar></header-bar>
            </Header>
            <Content class="main-content-con">
                <Layout class="main-layout-con">
                    <div>动态标签</div>
                </Layout>
            </Content>
            <Content class="content-wrapper">
                <keep-alive>
                    <router-view />
                </keep-alive>
            </Content>
        </Layout>
    </Layout>
</template>

<script>
import { mapMutations, mapState, mapGetters } from 'vuex'
import HeaderBar from './components/header-bar'
import SideMenu from './components/side-menu'
import routers from '@/router/routers'
export default {
    components: {
        HeaderBar,
        SideMenu
    },
    props: {},
    data () {
        return {
        }
    },
    watch: {
        '$route' (newRoute) {
            const { name, query, params, meta } = newRoute
            // this.addTag({
            //     route: { name, query, params, meta },
            //     type: 'push'
            // })
            this.setBreadCrumb(newRoute)
            // this.setTagNavList(getNewTagList(this.tagNavList, newRoute))
            // this.$refs.sideMenu.updateOpenName(newRoute.name)
        }
    },
    computed: {
        ...mapGetters(['menuList']),
        ...mapState({
            breadCrumbList: (state) => state.breadCrumbList
        }),
    },
    methods: {
        ...mapMutations(['setHomeRoute', 'setBreadCrumb'])
    },
    created () { },
    mounted () {
        this.setHomeRoute(routers)
        this.setBreadCrumb(this.$route)
    }
}
</script>
<style lang="less">
    .header-con {
        background: #fff;
    }
    .left_silder {
        width: 240px;
        position: fixed;
        bottom: 0;
        top: 0;
        color: #fff;
        background: #f5f5f5;
    }
    .right_content {
        margin-left: 240px;
    }
</style>
